<script setup>
import { reactive, defineEmits, ref } from "vue";
import { useApi } from "@/composables/useApi.js";
import showToast from "@/components/toast/index.js";
// import { getMedalListIndex } from "@/api/medal.js";

const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  buttonText: {
    type: String,
    required: true,
  },
});
let emit = defineEmits(["onChange", "onHandle", "changeId", "tabsChange"]);
const medalList = ref([]);
// getMedalListIndex().then((res) => {
//   console.log("syz111", res);
//   medalList.value = res.data;
// });
const inputValue = ref("");
const form = reactive({
  title: "",
  medalTitle:''
});
let sexList = ref(["男", "女"]);
const inputTypeStatus = ref(false); //自定义下拉框是展示开始隐藏
const inputType = ref(1); //输入框筛选  1姓名  2ID
const inputTypeSelect = reactive([
  { value: 1, label: "姓名" },
  { value: 2, label: "ID" },
]);

//判断下拉框是显示还是隐藏
const handleVisibleChange = (e) => {
  inputTypeStatus.value = !inputTypeStatus.value;
};
// 删除回调
const onHandle = (type) => {
  if (!sessionValue.value)
    return showToast("请先创建场次", { type: "warning" });
  emit("onHandle", type);
};
const search = () => {
  let inputValue = form.inputValue;
  if (inputType.value == 1) {
    form.student_name = inputValue;
    form.student_id = "";
  } else {
    form.student_name = "";
    form.student_id = inputValue;
  }
  showFlag.value = false;
  emit("onChange", form);
};
const reset = () => {
  form.title =''
  form.medalTitle =''
  emit("onChange", form);
};
const showFlag = ref(false);

/** 场次列表*/
const sessionList = ref([]);
const sessionValue = ref();

const getSessionList = async () => {
  const { data } = await useApi("/admin/Api.Examcourse/index").post({
    page: 1,
    limit: 99999,
    type: 2,
  });
  sessionList.value = data.value.data.data.map((item) => {
    return {
      ...item,
      id: item.examcourse_id,
    };
  });
  sessionValue.value = sessionList.value[0].examcourse_id;
  emit("changeId", {
    id: sessionValue.value,
    title: sessionList.value[0].title,
  });
};
getSessionList();
/** 获取场次列表结束*/

/** 场次下拉框切换或掉*/
const changeId = (val) => {
  console.log(val);
  sessionValue.value = val;
  let item = sessionList.value.find((item) => item.examcourse_id === val);
  emit("changeId", { id: sessionValue.value, title: item.title });
};
/** 获取年级列表开始*/
// const gradeList = ref([])
// getGradeListAll().then(res => {
//   gradeList.value = res.data
// })
/** 获取年级列表结束*/
/** 获取班级列表开始*/
const classList = ref([]);
const getClassList = async (id = "") => {
  console.log(id, "id");
  console.log(form.grade_id);
  const { data } = await useApi("/admin/Api.GradeClass/indexList").post({
    grade_id: id,
  });
  if (data.value.status == 200) {
    console.log(data.value.data);
    classList.value = data.value.data;
  }
};
/** 获取班级列表结束*/
const gradeChange = (id) => {
  console.log(id);
  if (id != form.grade_id) {
    form.class_id = null;
  }
  getClassList(id);
};

const changeShowFlag = () => {
  showFlag.value = !showFlag.value;
  console.log(showFlag.value);
};
const router = useRouter();

const goDetail = (item) => {
  console.log(item);
  router.push(
    `/platform/qualitySecondList?id=${item.id}&times=${
      item.times
    }&name=${"马超"}`
  );
};
/** 顶部切换素质教育/标化成绩tabs功能开始*/
const headerTabs = ref(0);
const handleHeaderTabs = (index) => {
  headerTabs.value = index;
  emit("tabsChange", index);
  //   todo tabs切换数据
};
/** 顶部切换素质教育/标化成绩tabs功能结束*/
const queryFrom = reactive({
  realname: "",
});
</script>

<template>
  <v-list class="header_box">
    <div class="head">
      <div class="heads">
        <div class="head_title">
          {{ props.title }}
        </div>
        <div class="tabs">
          <div
            @click="handleHeaderTabs(0)"
            :class="{ item: true, active: headerTabs === 0 }"
          >
            <i class="ri-medal-line"></i>
            奖章库
          </div>
          <div
            @click="handleHeaderTabs(1)"
            :class="{ item: true, active: headerTabs === 1 }"
          >
            <i class="ri-bar-chart-grouped-line"></i>
            奖章记录
          </div>
        </div>
        <div class="right">
          <!--          <IconBtn size="small" style="position: relative">-->
          <!--            <i-->
          <!--              class="ri-filter-3-line cursor-pointer"-->
          <!--              style="block-size: 24px;inline-size: 24px;"-->
          <!--              @click="changeShowFlag"-->
          <!--            />-->
          <!--          </IconBtn>-->
          <IconBtn size="small" style="position: relative">
            <i
              class="ri-filter-3-line cursor-pointer"
              style="block-size: 24px; inline-size: 24px"
              @click="changeShowFlag"
            />
          </IconBtn>
          <i
            class="ri-delete-bin-5-line cursor-pointer"
            style="
              block-size: 24px;
              inline-size: 24px;
              margin-inline-start: 24px;
            "
            @click="onHandle('delete')"
          />
          <VBtn
            color="primary"
            style="margin-inline-start: 24px"
            @click="onHandle('add')"
          >
            {{ buttonText }}
          </VBtn>
        </div>
      </div>
    </div>
  </v-list>
  <div class="menu-box" v-if="showFlag">
    <VList style="width: 310px !important">
      <VListItem>
        <template #prepend>
          <VTextField
            v-if="headerTabs == 0 "
            v-model="form.title"
            class="input-width-height"
            label="奖章名称"
          >
            <template v-slot:label>
              <span>奖章名称</span>
            </template>
          </VTextField>
          <VTextField
            v-else
            v-model="form.medalTitle"
            class="input-width-height"
            label="奖章名称"
          >
            <template v-slot:label>
              <span>奖章名称</span>
            </template>
          </VTextField>
        </template>
      </VListItem>
      <VListItem style="display: flex; justify-content: end">
        <VBtn color="primary" class="me-4" @click="search"> 搜索 </VBtn>
        <VBtn type="submit" color="primary" @click="reset"> 重置 </VBtn>
      </VListItem>
    </VList>
  </div>
</template>

<style lang="scss" scoped>
@use "@configured-variables" as variables;

:deep(.select-btn) {
  .el-select__wrapper {
    background-color: rgb(var(--v-theme-background));
    height: 39px;
    border: none;
    box-shadow: unset;
  }
}

//下拉框背景色
.el-popper.is-light.mySelectStyle {
  background-color: rgba(0, 136, 255, 0.1) !important;
  border: 1px solid #254277 !important;
}
//下拉框的链接小方块
.mySelectStyle.el-popper[data-popper-placement^="bottom"]
  .el-popper__arrow::before {
  border: 1px solid #254277 !important;
}
.mySelectStyle.el-popper[data-popper-placement^="top"]
  .el-popper__arrow::before {
  background: #254277 !important;
  border: 1px solid #254277 !important;
}
//鼠标移动上去的选中色
.mySelectStyle {
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    //background: #ece4ff !important;
  }

  //下拉框的文本颜色
  .el-select-dropdown__item {
    //color:var(--v-secondary) !important;
  }

  //选中之后的颜色
  .el-select-dropdown__item.selected {
    //background: #ece4ff !important;
  }
}
.menu-box {
  border-radius: 6px;
  position: absolute;
  top: 150px;
  right: 25px;
  width: 310px;
  background-color: #fff;
  z-index: 999;
}

.input-width-height {
  width: 280px !important;
}

.v-picker-title {
  display: none !important;
}

.examination-session {
  margin-left: 30px;
  cursor: pointer;
  width: 120px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: rgba(var(--v-theme-grey-100));
  background: rgba(var(--v-theme-button-grey-bg));
}

.right {
  display: flex;
  align-items: center;
  margin-inline-start: auto;
}

.select {
  z-index: 1;
  display: flex;
  align-items: center;
  color: #151619;
  cursor: pointer;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 157.143% */
  color: rgba(
    var(--v-theme-on-surface),
    var(--v-high-emphasis-opacity)
  ) !important;
}

.head {
  inline-size: 100%;
  padding-block: 12px;

  .heads {
    display: flex;
    align-items: center;
    inline-size: calc(100% - 48px);
    margin-block: 0;
    margin-left: 20px;

    .head_title {
      //color: #423b50;
      font-feature-settings: "ss01" on, "ss04" on;
      font-size: 20px;
      font-style: normal;
      font-variant-numeric: lining-nums tabular-nums;
      font-weight: 500;
      line-height: 140%; /* 28px */
    }

    .search {
      display: flex;
      align-items: center;
      border-radius: 74px;
      inline-size: 291px;
      margin-inline-start: 40px;
      padding-block: 8px;
      padding-inline: 16px;
      background-color: variables.$vertical-nav-background-color;
    }
  }
}

.header_box {
  padding: 0px;
  overflow: visible;
}
</style>
